
<style lang="scss" scoped>
header {
  height: 1.45rem;
  .user_img {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 100%;
  }
}
main {
  padding-bottom: 0.6rem;
  li {
    height: 0.48rem;
    line-height: 0.48rem;
    .tit {
      width: 1.7rem;
    }
    .tit1 {
      width: 0.8rem;
    }
  }
}
footer {
  bottom: 0;
  .btns {
    //   width: 100%;
    // padding: 0.07rem;
    li {
      padding: 0.08rem;
      height: 0.45rem;
    }
  }
}
</style>

<template>
    <div class="customer_data">
        <!-- <header class="box-center bgfff">
            <div class="img-bg user_img margin-b10"></div>
            <div>张三</div>
        </header> -->
        <main>
            <ul class="padding-lr15 bgfff margin-b10">
                <li class="border-b flex-col">
                    <div class="tit1 c82">姓名</div>
                    <div class="box1">{{clientInfo.clientName}}</div>
                </li>
                <li class="border-b flex-col">
                    <div class="tit1 c82">手机</div>
                    <div class="box1">{{clientInfo.clientPhone}}</div>
                </li>
                <li class="border-b flex-col">
                    <div class="tit1 c82">身份证</div>
                    <div class="box1">{{clientInfo.clientIdcard}}</div>
                </li>
                <li class="border-b flex-col">
                    <div class="tit1 c82">来源区域</div>
                    <div class="box1">{{clientInfo.provinceName}}{{clientInfo.cityName}}{{clientInfo.districtName}}</div>
                </li>
                <li class="border-b flex-col">
                    <div class="tit1 c82">性别</div>
                    <div class="box1">{{clientInfo.clientSex | getSex}}</div>
                </li>
            </ul>
            <ul class="padding-lr15 bgfff margin-t10">
                <li class="border-b flex-col">
                    <div class="tit c82">是否投资过房产</div>
                    <div class="box1">{{clientInfo.ifInvestHouseProperty | getIf}}</div>
                </li>
                <li class="border-b flex-col">
                    <div class="tit c82">是否投资过其他投资产品</div>
                    <div class="box1">{{clientInfo.ifInvestElseThing | getIf}}</div>
                </li>
                <li class="border-b flex-col">
                    <div class="tit c82">投资预算</div>
                    <div class="box1">{{clientInfo.investBudget}}</div>
                </li>
                <li class="border-b flex-col">
                    <div class="tit c82">投资的目的动机</div>
                    <div class="box1">{{clientInfo.investPurpose | getInvestPurpose}}</div>
                </li>
                <li class="border-b flex-col">
                    <div class="tit c82">是否可以自己做主</div>
                    <div class="box1">{{clientInfo.ifDecide | getIf}}</div>
                </li>
                <li class="border-b flex-col">
                    <div class="tit c82">客户性格类型</div>
                    <div class="box1">{{clientInfo.clientCharacter | getClientCharacter}}</div>
                </li>
                <li class="border-b flex-col">
                    <div class="tit c82">投资意向区域</div>
                    <div class="box1">{{clientInfo.investLikesDistrictName}}</div>
                </li>
                <li class="flex-col">
                    <div class="tit c82">预算回报率</div>
                    <div class="box1">{{clientInfo.expectBack}}</div>
                </li>
            </ul>

        </main>
        <footer class="position-f w100">
            <ul class="flex-col w100 btns cfff bgfff">
                <li class="box1">
                    <div class="bor-r bgred full box-center" @click="openEditClient">编辑资料</div>
                </li>
                <li class="box1">
                    <div class="bor-r bgf4 full box-center" @click="delClient">删除客户</div>
                </li>
            </ul>
        </footer>

    </div>
</template>

<script>
import { MessageBox } from "mint-ui";
export default {
  name: "",
  data() {
    return {
      clientInfo: {}
    };
  },
  filters: {
    getSex(val) {
      return val == "1" ? "男" : "女";
    },
    getIf(val) {
      return val == "1" ? "是" : "否";
    },
    getInvestPurpose(val) {
      let investPurpose = {
        "1": "长线投资",
        "2": "短线投资",
        "3": "住",
        "4": "租"
      };
      return investPurpose[val];
    },
    getClientCharacter(val) {
      let clientCharacter = {
        "1": "开放型",
        "2": "传统型",
        "3": "多面型",
        "4": "活跃型"
      };
      return clientCharacter[val];
    }
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      that.clientInfo = that.getCache("clientInfo");
    });
  },
  methods: {
    //打开修改客户
    openEditClient() {
      this.$router.push({
        path: "/add_customer",
        query: {
          id:1
        },
        meat: {
          title: "修改客户信息"
        }
      });
    },
    //删除客户
    delClient() {
      let that = this;
      this.alert("你确定删除该客户吗？", "2", val => {
        that.http
          .post("client/update")
          .then(res => {
            that.alert("删除成功", "1", () => {
              that.$router.push({
                path: "/my_customer"
              });
            });
          })
          .catch(err => {});
      });
    }
  }
};
</script>
